<template>
	<view class="lz-input" :class="APPTheme">
		<view class="lz-input-left" @click="searchFn">
			<uni-icons class="uni-icons" :type="icon" :size="size"></uni-icons>
			<view :style="{fontSize: size-4+'px'}">{{placehold}}</view>
		</view>
		<view class="lz-input-right" v-if="rightText" :style="{fontSize: size-4+'px'}" @click="searchTextFn">{{rightText}}</view>
	</view>
</template>

<script>
let that
import {
	mapGetters,
	mapActions
} from 'vuex'
export default {
	components:{},
	props: {
		rightText: {
			type: String,
			default: ''
		},
		icon: {
			type: String,
			default: ''
		},
		size:{
			type: Number,
			default: 20
		},
		placehold: {
			type: String,
			default: ''
		},
	},
	data() {
		return {}
	},
	computed: {
		...mapGetters(['APPTheme', 'userInfo', 'api']),
	},
	mounted() {
		that = this
	},
	onShow() {
		//设置主题颜色
		that.GLOBAL.setThemeColor(that.APPTheme)
	},
	methods: {
		searchFn(){
			that.$emit('click',{
				type:'input'
			})
		},
		searchTextFn(){
			that.$emit('click',{
				type:'text',
				value:that.rightText
			})
		}
	}
};
</script>

<style scoped lang="scss">
.lz-input{
	display: flex;align-items: center;
	.lz-input-left{
		flex: 1;padding:6px 10px;box-sizing: border-box;border-radius: 10px;margin-right: 5px;display: flex;align-items: center;
		.uni-icons{
			margin-right: 5px;
		}
	}
	.lz-input-right{
		font-size: 12px;color: #007AFF;
	}
}
.theme-light{
	.lz-input-left{
		background-color: #e5e5e5;color: #888888;
	}
}
.theme-dark{
	.lz-input-left{
		background-color: #1e1e1e;color: #888888;
	}
}
</style>
